<template>
  <el-menu
    :default-active="activeIndex"
    :collapse="isCollapse"
    :router="true"
    background-color="#989aa3"
    text-color="#fff"
    active-text-color="#ffd04b"
    class="h-full"
    @select="handleSelect"
  >
    <template v-for="item in menuData" :key="item.label">
      <el-sub-menu v-if="item.children?.length" :index="item.label">
        <template #title>
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </template>
        <Menu :menuData="item.children" />
      </el-sub-menu>
      <el-menu-item v-else :index="item.label">
        <el-icon><component :is="item.icon" /></el-icon>
        <span>{{ item.label }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>
<script setup lang="ts">
defineOptions({ name: "Menu" });
const activeIndex = ref("/");
const isCollapse = ref(false);
// 处理菜单点击
const handleSelect = (key: string) => {
  activeIndex.value = key;
  // emit("menu-select", key);
};
const props = defineProps<{
  menuData: any[];
}>();
</script>
